<template>
	<view>
		<!-- 自定义导航 -->
		<miaoshaNav :tabBars="tabBars" :tabIndex="tabIndex" @chang-tab="changTab"></miaoshaNav>		
		<!-- 将导航栏数据放入navData中,默认为{[name: 'XXX']}，可到componets/Nav.vue中修改 -->
		<!-- 列表 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(item, index) in tabBars">
					<view class="items">
						<goodsListtwo :dataList="dataList" :index="current"></goodsListtwo>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import apiindex from "../../common/api/index.js"
	import miaoshaNav from "../../components/goods/miaosha-nav"
	import goodsListtwo from "../../components/goods/goods-listtwo.vue"
	import loadMore from "../../components/common/load-more"
	import commonList from "../../components/common/common-list"
	export default {
		data() {
			return {
				swiperheight:155,//屏幕高度
				tabIndex:0,//tab索引
				tabBars:[
					{name:"00:00",id:"6"},
					{name:"10:00",id:"7"},
					{name:"12:00",id:"8"},
					{name:"15:00",id:"9"},
					{name:"20:00",id:"10"}
				],
				// 导航栏数据
				navData: [],
				params:{
					hour_type:6,
					page:1,
				},
				dataList: [],
				// swiper动态高度
				current: 0,
				refreshering: true
			}
		},
		onLoad() {
			uni.showNavigationBarLoading()
			this.fastbuy()
		},
		components:{
			miaoshaNav,
			goodsListtwo,
			commonList,
			loadMore,
		},
		methods: {
			
			//快枪商品
			fastbuy(){
				apiindex.fastbuy(this.params).then(res =>{
					if(res.code == 1){
						this.params.page=res.data.next_page
						this.dataList=res.data.data
						this.swiperheight = res.data.data.length*150
						uni.hideNavigationBarLoading()
					}
				}).catch(res =>{
					
				});				
			},
			
			//点击切换
			changTab(index){
				this.tabIndex = index;
				this.params.hour_type=this.tabBars[this.tabIndex].id
				this.fastbuy();
				uni.showNavigationBarLoading()
			},
			//滑动切换
			tabChange(e){
				this.tabIndex = e.detail.current;
				this.params.hour_type=this.tabBars[this.tabIndex].id
				this.fastbuy();
				uni.showNavigationBarLoading()
			},
			loadmore(){
				//上拉加载
			},
			// 滑动内容页事件
			changeSwiper(e) {
				this.current = e.detail.current
				this.$emit('changeNavIndex', e.detail.current)
				console.log(e)
			},
			// 下拉刷新事件
			refresher() {
				var that = this
				that.refreshering = true
				console.log('下拉刷新')
				setTimeout(function() {
					that.refreshering = false
					console.log('刷新成功')
				},2000)
			}
		}
	}
</script>

<style scoped>
	.faquan-bar-fixed{
		width:100%;
		height:80upx;
	}
	uni-swiper{
		height:100%;
	}
	.content{
		height:2000upx;
	}
	.faquan-index{
		width:96%;
		padding:0 2% 10% 2%;
	}
	.faquan-index-top{
		width:100%;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
	}
	.faquan-index-avatar{
		width:15%;
	}
	.faquan-index-avatar image{
		width:80upx;
		height:80upx;
	}
	.faquan-index-name{
		width:45%;
	}
	.faquan-index-name>view{
		margin-left:10upx;
	}
	.faquan-index-name>view:first-child{
		font-weight:bold;
		font-size:30upx;
		line-height:30upx;
	}
	.faquan-index-name>view:last-child{
		background:#FA436A;
		color:#fff;
		display:inline-block;
		padding:0 10upx;
		font-size:20upx;
		border-radius:10upx;
		
	}
	.faquan-index-button{
		width:40%;
		padding-top:10upx;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
	}
	.faquan-index-button>view:first-child{
		width:50%;
	}
	.faquan-index-button>view:last-child{
		width:40%;
		margin-left:10%;
	}
	.faquan-index-button image{
		width:30upx;
		height:30upx;
		display:inline-block;
		position: relative;
		top:5upx;
	}
	.faquan-index-button text{
		padding:5upx 10upx;
		margin-right:10upx;
		border-radius:10upx;
	}
	.faquan-index-button>text:first-child{
		background: #FA436A;
	}
	.faquan-index-button>text:last-child{
		background:#F76260;
	}
	.faquan-index-content-detail{
		color:#FA436A;
		font-size:30upx;
		font-weight:bold;
	}
	.faquan-index-content-detail>image{
		display:inline-block;
		width:30upx;
		height:30upx;
		margin-left:10upx;
		position:relative;
		top:5upx;
	}
	.faquan-index-image{
		width:100%;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
		flex:1;
	}
	.faquan-index-image>view{
		width:28%;
		padding:2%;
	}
	.faquan-index-image>view>image{
		width:100%;
		height:200upx;
	}
	.faquan-index-kouling{
		width:98%;
		background:#F8F6FC;
		padding:2%;
	}
	.faquan-index-kouling>view:last-child{
		text-align:right;
	}
	.faquan-index-kouling>view:last-child>text{
		padding:10upx 20upx;
		border:#FA436A 1px solid;
		text-align:right;
		color:#FA436A;
		border-radius:20upx;
	}
	
</style>
